<template>
  <div class="home_right w-100%">
    <MCard class="w-100% min-h-307px" v-for="(item, index) in antennaStatus" :key="index">
      <template #header >
        <span class="m-r-10px">{{ t('home.antenna_status_label') }}</span>
        <span class="m-r-10px" v-if="item.type"> ( {{ item.type }} ) </span>
      </template>
      <div class="grid grid-cols-4" style="gap: 10px 15px;">
        <div 
        v-for="(_, key) in antennaStatusLabel" 
        v-show="key!=='type'"
        :key="key" 
        class="flex flex-col gap-2"   
        >
        <div v-if="key==='transmit_frequency'||key==='receive_frequency'">{{ antennaStatusLabel[key].label+"("+item.kd+")" }}</div>
        <div class="text-#FFFFFF text-size-13px" v-else>{{ antennaStatusLabel[key].label }}</div>
          <el-tooltip :content="item[key] + (antennaStatusLabel[key].unit || '')" placement="top" effect="light">
            <div class="text-#00AAFF text-size-15px truncate cursor-pointer font-bold" >
              <div v-if="antennaStatusLabel[key].isCustom&&key==='status'" :class="item[key] === 'normal' ? 'normal' : ''">
                {{ item[key] === 'on' ? '工作中' : "未工作" }}
              </div>
              <div v-else-if="antennaStatusLabel[key].isCustom&&(key==='transmit_polarization'||key==='receive_polarization')">
               {{ item[key] === 'right' ? '右旋圆极化' : '左旋圆极化' }}
              </div>
              <span v-else class="text-size-15px">{{ item[key] }}{{ antennaStatusLabel[key].unit }}</span>
            </div>
          </el-tooltip>
        </div>
      </div>
    </MCard>
    <MCard  class="w-100% home_right_bottom_card ">
      <template #header>
        <span>{{ t('home.dnn_status_label') }}</span>
      </template>
      <div class="w-100%">
        <el-table :data="dnnInfo" max-height="180" style="width: 100%;">
          <el-table-column  :label="t('home.business_type_label')" prop="type" >
            <template #default="scope">
              {{ TYPE_MAP[scope.row.type] }}
            </template>
          </el-table-column>
          <el-table-column :label="t('home.dnn_name_label')" prop="using_dnn"
            ></el-table-column>
          <el-table-column :label="t('home.connection_status_label')" prop="connect"
            >
            <template #default="{ row }">
              <div :class="row.connect === 'on' ? 'normal' : ''">
                {{ row.connect === 'on' ? '已连接' : "未连接" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="t('home.ip_address_label')" prop="dnn_ip" width="150"></el-table-column>
        </el-table>
      </div>
    </MCard>
  </div>
</template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'HomeRight',
 })
 </script>
 <script setup  lang="ts">
import { useI18n } from 'vue-i18n'
import { antennaManageApi } from '@/api/antennaManage'
import { DnnConfigApi } from '@/api/dnnConfig'
import { NetworkAccessManagementApi } from '@/api/networkAccessManagement'
import calColWidth from '@/utils/colLabel'
import { getWebSocketInstance } from '@/utils/websocketExample'
 const { t } = useI18n()
 const antennaStatus = ref<any>([{
  type:'',
  status:'',
  lon_store:'',
  sat:'',
  elevate:'',
  azimuth:'',
  transmit_frequency:'',
  receive_frequency:'',
  buc:'',
  bdc:'',
  temp:'',
  transmit_polarization:'',
  receive_polarization:'',
  ss:'',
  sinr:''
 }])
 const antennaStatusLabel = computed(()=>{
  return {
    type:{
      label:t('home.antenna_type_label'),
      unit:'',
      isCustom:false,
    },
    status:{
      label:t('home.work_status_label'),
      unit:'',
      isCustom:true,
    },
    lon_store:{
      label:t('home.star_position_label'),
      unit:'',
      isCustom:false,
    },
    sat:{
      label:t('home.star_num_label'),
      unit:'',
      isCustom:false,
    },
    elevate:{
      label:t('home.elevate_label'),
      unit:'°',
      isCustom:false,
    },
    azimuth:{
      label:t('home.azimuth_label'),
      unit:'°',
      isCustom:false,
    },
    transmit_frequency:{
      label:t('home.uplink_frequency_label'),
      unit:'MHz',
      isCustom:false,
    },
    receive_frequency:{
      label:t('home.downlink_frequency_label'),
      unit:'MHz',
      isCustom:false,
    },
    buc:{
      label:t('home.buc_label'),
      unit:'',
      isCustom:false,
    },
    bdc:{
      label:t('home.bdc_label'),
      unit:'',
      isCustom:false,
    },
    temp:{
      label:t('home.temp_label'),
      unit:'°C',
      isCustom:false,
    },
    transmit_polarization:{
      label:t('home.transmit_polarization_label'),
      unit:'',
      isCustom:true,
    },
    receive_polarization:{
      label:t('home.receive_polarization_label'),
      unit:'',
      isCustom:true,
    },
    ss:{
      label:t('home.signal_strength_label'),
      unit:'',
      isCustom:false,
    },
    sinr:{
      label:t('home.signal_noise_ratio_label'),
      unit:'',
      isCustom:false,
    }
  }
 })
 const SATE_MAP:any= {
  0:t('home.star_0_label'),
  1:t('home.star_2_label'),
  2:t('home.star_3_label'),
  3:t('home.star_1_label'),
}
 async function postAntennaInfo(data:any){
  try {
    const {ant} = data
    antennaStatus.value = ant.map((item:any)=>{
    const {status,param,kd} = item
    return {
      type:status.type,
      status:status.status,
      lon_store:'',
      sat:'',
      elevate:status.elevate,
      azimuth:status.azimuth,
      transmit_frequency:param.transmit_frequency,
      receive_frequency:param.receive_frequency,
      buc:param.buc,
      bdc:param.bdc,
      temp:status.temp,
      transmit_polarization:param.transmit_polarization,
      receive_polarization:param.receive_polarization,
      ss:status.ss,
      sinr:status.sinr,
      kd:kd
    }
  })
  } catch (error) { }
 }
const dnnInfo = ref<any>([])
const TYPE_MAP:any= computed(()=>{
  return {
    internet:t('home.internet_label'),
    private_net:t('home.private_net_label'),
    language:t('home.language_label'),
    xwtj:t('home.xwtj_label'),
    caa:t('home.caa_label'),
  }
})
const dnnType = ['internet','xwtj','caa']
async function postDnnInfo(data:any){
  try {
    dnnInfo.value = data.list.filter((item:any)=>dnnType.includes(item.type))
      dnnInfo.value.sort((a:any,b:any)=>{
        return a.type === 'internet' ? -1 : 1
      })
  } catch (error) {}
 }

 function colLabelFn(){
  const colLabel = {
    type:t('home.business_type_label'),
    name:t('home.dnn_name_label'),
    connect:t('home.connection_status_label'),
    dnn_ip:t('home.ip_address_label'),
  }
  return calColWidth(colLabel,dnnInfo.value)
 }
 const colData = ref<any>({})
 watch([dnnInfo,()=>t('home.business_type_label')],async ()=>{
  await nextTick()
  colData.value = colLabelFn()
 },{
  deep:true
 })
 onMounted(()=>{
  window.addEventListener('resize',async ()=>{
    await nextTick()
    colData.value = colLabelFn()
  })
 })
const ws = getWebSocketInstance()
// WebSocket命令处理配置
const wsHandlerConfig: Record<string, any> = {
  'ap_ant_manage_get': {
    handler: postAntennaInfo,
    type: 'function'
  },
  'ap_sync_lon_store_get': {
    field: 'lon_store',
    getValue: (data: any) => data.lon_store,
    type: 'update'
  },
  'ap_sync_sate_get': {
    field: 'sat', 
    getValue: (data: any) => SATE_MAP[data.sate],
    type: 'update'
  },
  'ap_net_dnn_get': {
    handler: postDnnInfo,
    type: 'function'
  }
}
// 统一的天线状态更新函数
function updateAntennaStatus(field: string, value: any) {
  antennaStatus.value = antennaStatus.value.map((item: any) => ({
    ...item,
    [field]: value
  }))
}
function handleWsMessage(response: any) {
  const { cmd, data } = response
  const config = wsHandlerConfig[cmd]
  if (!config) return
  if (config.type === 'function') {
    // 调用处理函数
    config.handler(data)
  } else if (config.type === 'update') {
    // 更新天线状态字段
    const value = config.getValue(data)
    updateAntennaStatus(config.field, value)
  }
}
const wsCmdList = [
  'ap_ant_manage_get',
  'ap_sync_sate_get',
  'ap_sync_lon_store_get',
  'ap_net_dnn_get'
]
ws.on('message',(response:any)=>{
  const {cmd} = response
  if(wsCmdList.includes(cmd)){
    handleWsMessage(response)
  }
})
onUnmounted(()=>{
  window.removeEventListener('resize',colLabelFn)
 })
 </script>
 
 <style  lang="scss" scoped>
@import '@/styles/card.scss';
@import '@/styles/table.scss';
.home_right{
  .el-card {
  :deep(.el-card__body) {
    padding: 20px;
  }

  .normal {
    width: 55px;
    height: 20px;
    background: rgba(35, 221, 2, 0.41);
    border-radius: 4px;
    border: 1px solid #2D8802;
    color: #FFFFFF;
    line-height: 16px;
    text-align: center;
  }

  .abnormal {
    width: auto;
    height: 20px;
    background: rgba(255, 0, 0, 0.41);
    border-radius: 4px;
    border: 1px solid #FF2300;
    color: #FFFFFF;
    line-height: 16px;
    text-align: center;
  }
}
.home_right_bottom_card{
  :deep(.el-card__body){
    padding: 0;
  }
}
}

 
</style>
 
